"use client";
import { RainbowButton } from "@/components/button/RainbowButton";
import { MdAdd, MdClose } from "react-icons/md";
import * as Dialog from "@radix-ui/react-dialog";
import { useState } from "react";
import { MagicText } from "@/components/text/MagicText";
import { BookType } from "@/types/book";

export type EditBookProps = {
  type: 'add' | 'edit';
  item?: BookType;
  success?: () => void;
}

export const EditBook = (props: EditBookProps) => {

  const [open, setOpen] = useState(0);
  const [original, setOriginal] = useState(props.item?.original || '');
  const [rewrite, setRewrite] = useState(props.item?.rewrite || '');



  const handleSubmit = async () => {

    const params: BookType = {
      original,
      rewrite,
    }
    if (props.type == 'edit') {
      params['id'] = props.item?.id;
    }

    await fetch('/api/admin/book', {
      method: 'POST',
      body: JSON.stringify(params),
    })
    setOpen(0);
    window.location.reload();
  }

  return (
    <Dialog.Root open={!!open}>
      <Dialog.Trigger asChild>
        {
          props.type == 'add'
            ?
            <RainbowButton className="text-white px-[18px]" onClick={() => setOpen(1)}><MdAdd size={20} />新增</RainbowButton>
            :
            <RainbowButton className="text-white px-[18px]" size="sm" onClick={() => setOpen(2)}>编辑</RainbowButton>
        }

      </Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay className="fixed inset-0 bg-blackA6 data-[state=open]:animate-overlayShow" />
        <Dialog.Content className="fixed left-1/2 top-1/2 max-h-[85vh] w-[90vw] max-w-[450px] -translate-x-1/2 -translate-y-1/2 rounded-md bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none data-[state=open]:animate-contentShow">
          <Dialog.Title >
            <MagicText className="m-0 text-[20px] font-medium text-mauve12" text={open === 1 ? "新 增" : "编 辑"} />
          </Dialog.Title>

          <fieldset className="mb-[15px] flex items-center gap-5 mt-[36px]">
            <label
              className="w-[48px] text-right text-[15px]"
              htmlFor="original"
            >
              原句：
            </label>
            <input
              className="inline-flex h-[35px] w-full flex-1 items-center justify-center rounded px-2.5 text-[15px] leading-none shadow-[0_0_0_1px] shadow-violet7 outline-none focus:shadow-[0_0_0_2px] focus:shadow-violet8"
              id="original"
              value={original}
              onChange={(e) => setOriginal(e.target.value)}
            />
          </fieldset>
          <fieldset className="mb-[15px] flex items-center gap-5">
            <label
              className="w-[48px] text-right text-[15px]"
              htmlFor="rewrite"
            >
              重写：
            </label>
            <input
              className="inline-flex h-[35px] w-full flex-1 items-center justify-center rounded px-2.5 text-[15px] leading-none shadow-[0_0_0_1px] shadow-violet7 outline-none focus:shadow-[0_0_0_2px] focus:shadow-violet8"
              id="rewrite"
              value={rewrite}
              onChange={(e) => setRewrite(e.target.value)}
            />
          </fieldset>
          <div className="mt-[25px] flex justify-end">
            <Dialog.Close asChild>
              <RainbowButton className="text-white px-[18px] mr-[10px]" onClick={() => handleSubmit()}>保存</RainbowButton>
            </Dialog.Close>
          </div>
          <Dialog.Close asChild>
            <button
              className="absolute right-2.5 top-2.5 inline-flex size-[25px] appearance-none items-center justify-center rounded-full hover:bg-violet4 focus:shadow-[0_0_0_2px] focus:shadow-violet7 focus:outline-none"
              aria-label="Close"
              onClick={() => setOpen(0)}
            >
              <MdClose />
            </button>
          </Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  )
}